<template>
    <div class="container">
        <div class="train-name"><img src="/trainclass/pagetitle.png"></div>
        <div class="meta container-bottom">
            <div class="title yellow">主办单位：</div>
            <p class="white">
                北大医学部医大时代教育&爱思唯尔Elsevier（医大爱思唯尔）
            </p>
            <div class="title yellow">培训地址：</div>
            <p class="white">北大医学部会议中心</p>
        </div>
        <!-- 课程简介 -->
        <img :src="titleIntroImage" class="img-title">
        <div class="toggle" @click="introCollapse = !introCollapse"> {{ introCollapse ? '收起' : '展开' }}
            <img :src="introCollapse ? '/trainclass/arrow_up.png' : '/trainclass/arrow_down.png'" class="arrow">
        </div>
        <div class="intro" v-if="introCollapse">
            <p class="yellow">
                本系列课程将设四个主题：骨组织（Bone）1天、软组织（Soft
                Tissue）2天、修复体（Prosthesis）1天和无牙颌2天。我们将分别为您讲述各个部分最为实用的技术技巧以及每一步操作的内在逻辑。我们还会向您揭示骨组织-软组织-修复体三者之间以及和无牙颌功能美学的内在联系和相互影响，让您从一个全新的视角对种植以及全口功能美学重建有一个更加全面、深入的认识。
            </p>
            <p class="yellow">
                这是一个雅俗共赏的系列课程，在这里您不仅可以学习非常实用、接地气的技术技巧，而且可以同讲师一起深入探讨前沿的学术问题。我们去粗取精、去伪存真，摒弃复杂的手术术式，用简单、实用、好学的方法去解决各种复杂的临床问题。
            </p>
        </div>
        <div class="wish white container-bottom" v-if="introCollapse">
            我们有一个朴素的心愿：<br>
            让我们的同行少走点弯路，让我们的患者少受点罪。用最简单实用的方法实现最佳的美学效果。
        </div>
        <!-- 北大教授简介 -->
        <img :src="titleTeacherImage" class="img-title">
        <div class="toggle" @click="teacherCollapse = !teacherCollapse"> {{ teacherCollapse ? '收起' : '展开' }}
            <img :src="teacherCollapse ? '/trainclass/arrow_up.png' : '/trainclass/arrow_down.png'" class="arrow">
        </div>
        <div class="teacher container-bottom" v-if="teacherCollapse">
            <div class="item" v-for="teacher in teacherList">
                <div class="left"><img :src="teacher.photo" class="teacher-photo"></div>
                <div class="right">
                    <div class="name">
                        {{ teacher.name }}
                    </div>
                    <div class="title">
                        {{ teacher.title }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程内容简介 -->
        <img :src="titleContentImage" class="img-title" style="width: 50%;">
        <div class="toggle" @click="contentCollapse = !contentCollapse"> {{ contentCollapse ? '收起' : '展开' }}
            <img :src="contentCollapse ? '/trainclass/arrow_up.png' : '/trainclass/arrow_down.png'" class="arrow">
        </div>
        <div class="content container-bottom" v-if="contentCollapse">
            <div v-for="(section, index) in contentList[seriesNum -1].sections" :key="index">
                <div class="title" v-html="section.title">
                </div>
                <div v-for="(line, lineIndex) in section.lines" :key="lineIndex" class="line" :style="line.marginbottom ? 'margin-bottom: 30px;' : ''" >
                    <span class="time yellow">{{ line.time }}</span>
                    <span class="arrange white"  v-if="line.isbr === true" v-html="line.arrange" >
                    </span>
                    <span class="arrange white nobr" v-else>
                        {{ line.arrange }}
                    </span>
                    <div v-if="line.details">
                        <p v-for="(detail, detailIndex) in line.details" :key="detailIndex" :style="{ 
                            lineHeight: line.multiText && detailIndex === 2 ? '30px' : '10px' 
                        }">
                            · {{ detail }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 病例展示 -->
        <img :src="titleCaseImage" class="img-title">
        <div class="toggle" @click="caseCollapse = !caseCollapse"> {{ caseCollapse ? '收起' : '展开' }}
            <img :src="caseCollapse ? '/trainclass/arrow_up.png' : '/trainclass/arrow_down.png'" class="arrow">
        </div>
        <div class="case container-bottom" v-if="caseCollapse">
            <div class="title">
                上前牙水平向软硬组织增量
            </div>
            <img src="/trainclass/case_01.png">
            <div class="title">
                上前牙水平向+垂直向软硬组织增量
            </div>
            <img src="/trainclass/case_02.png">
            <div class="title">
                下后牙垂直向骨增量
            </div>
            <img src="/trainclass/case_03.png">
            <img src="/trainclass/case_04.png">
        </div>
        <div class="contact">
            <p>联系方式</p>
            <p>开课咨询：13910605059（同微信）</p>
            <p>单位地址：北京海淀区学院路38号<br>北大医学部科创楼五层</p>
            <img src="/trainclass/wechat_qrcode.png">
            <p>扫描二维码，添加微信咨询</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import { markRaw, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { MagicString } from 'vue/compiler-sfc';
const route = useRoute();
const router = useRouter();
const introCollapse = ref(true)
const teacherCollapse = ref(true)
const contentCollapse = ref(true)
const caseCollapse = ref(true)
const seriesNum = ref(1)//系列课程编号
const titleIntroImage = ref('/trainclass/title_intro_01.png')
const titleTeacherImage = ref('/trainclass/title_teacher_01.png')
const titleContentImage = ref('/trainclass/title_content_01.png')
const titleCaseImage = ref('/trainclass/title_case_01.png')

const teacherList = [
    {
        name: '谭建国教授',
        photo: '/trainclass/tanjianguo.png',
        title: '北京大学口腔医学院教授, 主任医师，博士生导师。中华口腔医学会继续教育部主任。'
    },
    {
        name: '刘晓强副教授',
        photo: '/trainclass/liuxiaoqiang.png',
        title: '北京大学口腔医学院副教授，博士生导师。'
    },
    {
        name: '周建锋副教授',
        photo: '/trainclass/zhoujianfeng.png',
        title: '北京大学口腔医学院修复科副教授，副主任医师。中华口腔医学会口腔美学专业委员会常委。'
    },
    {
        name: '刘建彰副教授',
        photo: '/trainclass/liujianzhang.png',
        title: '北京大学口腔医学院修复科副教授，主任医师。北京大学口腔医院种植中心主任。国际口腔种植学会ITI Fellow。'
    },
    {
        name: '李德利副教授',
        photo: '/trainclass/lideli.png',
        title: '北京大学口腔医院第二门诊部副主任、修复科/种植科主任、博士/副主任医师。',
    },
    {
        name: '陈立副教授',
        photo: '/trainclass/chenli.png',
        title: '北京大学口腔医学院修复科博士、主任医师、副教授、硕士研究生导师，北京大学口腔医（学）院纪委副书记、纪检办公室主任。'
    }
]

// 定义不同系列课程的内容数据
const contentList = [
    {
        sections: [
            {
                title: '系列一：骨增量篇（Bone Augmentation）<br>---如何获得可预期的GBR骨增量效果（为期1日）',
                lines: [
                    { time: '8:30-9:00', arrange: '签到' },
                    { time: '9:00-10:00', arrange: '前牙软组织美学修复的原则及软组织张力理念在美学修复中的应用<br>（谭建国教授）',isbr:true },
                    {
                        time: '10:00-11:00',
                        arrange: 'GBR成骨潜能的深度挖掘',
                        details: [
                            '水平向增量',
                            '垂直向增量',
                            '重度吸收无牙颌的牙槽嵴重建'
                        ]
                    },
                    { time: '11:00-12:30', arrange: 'GBR成功的关键因素★★★', marginbottom: true },
                    { time: '12:30-13:30', arrange: '午饭', marginbottom: true },
                    {
                        time: '15:15-15:30',
                        arrange: 'GBR操作的分步解析（一）',
                        marginbottom: true,
                        details: [
                            '切口设计',
                            '翻瓣的设计及技巧',
                            '减张的技巧'
                        ]
                    },
                    { time: '15:15-15:30', arrange: '茶歇' },
                    {
                        time: '15:30-17:00',
                        arrange: 'GBR操作的分步解析（二）',
                        details: [
                            '缝合的注意事项及技巧',
                            'GBR同期软组织移植的作用及技巧',
                            '游离结缔组织制取的方法及技巧'
                        ]
                    },
                    { time: '17:00-17:30', arrange: '答疑' }
                ]
            }
        ]
    },
    {
        sections: [
            {
                title: '系列二： 软组织增量篇（Soft Tissue Augmentation）<br>---牙周软组织美学重建（为期2日）',
                lines: [
                    { time: '【Day 1】', arrange: '' },
                    { time: '8:30-9:00', arrange: '签到' },
                    { time: '9:00-10:00', arrange: '前牙软组织美学修复的原则及软组织张力理念在美学修复中的应用<br>（谭建国教授）',isbr:true },
                    { time: '10:00-10:15', arrange: '茶歇' },
                    { time: '10:30-12:00', arrange: '冠延长手术、角化龈增量手术、桥体区软组织增量', marginbottom: true },
                    { time: '12:00-13:00', arrange: '午饭', marginbottom: true },
                    {
                        time: '13:00-15:50',
                        arrange: '天然牙/种植牙唇侧水平向软组织增量',
                        marginbottom: true,
                        details: [
                            '颈缘灰线的软组织覆盖手术',
                            '即刻种植同期结缔组织移植手术',
                            'GBR同期的结缔组织移植手术',
                            '水平向软组织缺陷的修复',
                        ]
                    },
                    { time: '15:15-15:30', arrange: '茶歇' },
                    {
                        time: '15:30-17:00',
                        arrange: '天然牙/种植牙唇侧垂直向软组织增量 & 牙龈乳头的增量',
                        details: [
                            '根面覆盖手术',
                            '垂直向软组织缺陷的修复',
                            '牙龈乳头的增量',
                        ]
                    },
                    { time: '17:00-17:30', arrange: '答疑', marginbottom: true  },
                    { time: '【Day 2】', arrange: '' },
                    { time: '9:00-10:30', arrange: '如何做好软组织手术' },
                    {
                        time: '10:30-12:00',
                        arrange: '牙周软组织手术的技术技巧',
                        multiText:true,
                        details: [
                            '游离龈 / 游离结缔组织的制取',
                            '供区的处理',
                            '牙周手术常用的各种“瓣”---各种转瓣技术、翻瓣技术，以及半厚瓣、全厚瓣、根向复位瓣、冠向复位瓣、侧方转移瓣等等',
                            '缝合的技巧',
                            '术后的维护',
                        ]
                    },
                    { time: '12:00-12:30', arrange: '答疑' },
                    { time: '', arrange: '如需要可在下午安排实操课' },
                ]
            }
        ]
    },
    {
        sections: [
            {
                title: '系列三： 完美修复篇（Aesthetic Prosthesis）<br>---如何做好前牙种植软组织美学修复（为期1日）',
                lines: [
                    { time: '8:30-9:00', arrange: '签到' },
                    { time: '9:00-10:00', arrange: '前牙软组织美学修复的原则及软组织张力理念在美学修复中的应用<br>（谭建国教授）',isbr:true  },
                    { time: '10:00-10:15', arrange: '茶歇' },
                    {
                        time: '10:30-12:30',
                        arrange: '即刻临时修复的重要意义及操作技巧', marginbottom: true
                    },
                    { time: '12:30-13:30', arrange: '午饭', marginbottom: true },
                    {
                        time: '13:30-15:00',
                        arrange: '卵圆形桥体技术在美学修复中的应用：种植软组织的引导和塑形',
                    },
                    { time: '15:00-15:15', arrange: '茶歇' },
                    {
                        time: '15:30-17:30',
                        arrange: '种植软组织精确印模技术',
                    },
                ]
            }
        ]
    },
    {
        sections: [
            {
                title: '系列四：无牙颌种植功能美学重建 <br>----如何做好全口功能与美学重建（为期2日）',
                lines: [
                    { time: '【Day 1】 （全口种植手术部分）', arrange: '' },
                    { time: '9:00-10:30', arrange: '无牙颌种植功能美学重建的设计原则及注意事项（理论） 刘建彰' },
                    { time: '10:45-12:00', arrange: '无牙颌种植的解剖学基础 （理论） 陈立', marginbottom: true },
                    { time: '12:00-13:00', arrange: '午餐', marginbottom: true },
                    { time: '13:00-14:30', arrange: '无牙颌种植的数字化外科流程 （理论） 刘晓强'},
                    { time: '14:30-16:30', arrange: '无牙颌种植的数字化外科操作（实操） 刘晓强 周建锋'},
                    { time: '16:30-17:15', arrange: '改良硅橡胶咬合定位导板在无牙颌全口种植中的应用 （理论） 周建锋' },
                    { time: '17:15-18:00', arrange: '答疑及学员病例分享和讨论', marginbottom: true},
                    { time: '【Day 2】 （全口种植修复部分）', arrange: '', marginbottom: true  },
                    { time: '8:30-10:00', arrange: '八步法-牙列重度磨耗功能美学重建 （理论） 谭建国教授' },
                    { time: '10:15-12:15', arrange: '无牙颌全口种植功能美学修复的原则及技巧 （理论） 李德利', marginbottom: true  },
                    { time: '12:15-13:00', arrange: '午餐', marginbottom: true  },
                    { time: '13:00-14:15', arrange: '全程数字化种植理念和实践 方晶焕（拟定）' },
                    { time: '14:30-16:00', arrange: '无牙颌全口种植的印模技术（实操）李德利 陈立' },
                    { time: '16:00-17:30', arrange: '无牙颌全口种植即刻临时修复的制作（实操） 陈立 李德利' },
                    { time: '17:30-18:15', arrange: '答疑及学员病例分享和讨论'},
                ]
            }
        ]
    },
   
];


const switchSeries = (num: number) => {
    switch (num) {
        case 1:
            titleIntroImage.value = '/trainclass/title_intro_01.png'
            titleTeacherImage.value = '/trainclass/title_teacher_01.png'
            titleContentImage.value = '/trainclass/title_content_01.png'
            titleCaseImage.value = '/trainclass/title_case_01.png'
            break
        case 2:
            titleIntroImage.value = '/trainclass/title_intro_02.png'
            titleTeacherImage.value = '/trainclass/title_teacher_02.png'
            titleContentImage.value = '/trainclass/title_content_02.png'
            titleCaseImage.value = '/trainclass/title_case_02.png'
            break
        case 3:
            titleIntroImage.value = '/trainclass/title_intro_03.png'
            titleTeacherImage.value = '/trainclass/title_teacher_03.png'
            titleContentImage.value = '/trainclass/title_content_03.png'
            titleCaseImage.value = '/trainclass/title_case_03.png'
            break
        case 4:
            titleIntroImage.value = '/trainclass/title_intro_04.png'
            titleTeacherImage.value = '/trainclass/title_teacher_04.png'
            titleContentImage.value = '/trainclass/title_content_04.png'
            titleCaseImage.value = '/trainclass/title_case_04.png'
            break
        default:
            titleIntroImage.value = '/trainclass/title_intro_01.png'
            titleTeacherImage.value = '/trainclass/title_teacher_01.png'
            titleContentImage.value = '/trainclass/title_content_01.png'
            titleCaseImage.value = '/trainclass/title_case_01.png'
            break
    }
}

onMounted(() => {
    // console.log("route.params.id", route.params.id)
    seriesNum.value = parseInt(route.params.id as string)
    switchSeries(seriesNum.value)
    // console.log("seriesNum", seriesNum.value)
})

</script>
<style lang="scss" scoped>

@use "sass:math";

// Define the Sass variable
$base-font-size: 16;

// Helper function to convert px to rem
@function px2rem($px) {
    // Use math.div() to perform division
    @return math.div($px, $base-font-size) * 1rem;
}

.yellow {
    color: #FEAB00;
    font-weight: 500;
}

.white {
    color: #FFFFFF;
}


.container-bottom {
    margin-bottom: px2rem(40);
}

.img-title {
    width: 40%;
}

.toggle {
    color: lightgray;
    width: 80%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: px2rem(20);

    img.arrow {
        width: px2rem(16);
        height: px2rem(16);
        margin-left: px2rem(3);
        vertical-align: middle;
    }
}

.container {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y:scroll;
    box-sizing: border-box; 
    color: #FFFFFF;
    background-image: url("/trainclass/bg.jpeg");
    font-size: px2rem(16);
    font-weight: 500;
    padding-left: px2rem(10);
    padding-right: px2rem(10);
    padding-bottom: px2rem(40);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    .train-name {
        margin-top: px2rem(20);
        margin-bottom: px2rem(20);

        img {
            width: 100%;
        }

    }

    .meta {
        font-size: px2rem(16);
        line-height: px2rem(22);
        text-align: left;

    }

    .intro {
        text-align: justify;
        width: 100%;

        p {
            text-indent: 2em;
            font-size: px2rem(16);
            line-height: px2rem(22);
        }
    }

    .wish {
        padding: px2rem(20);
        font-size: px2rem(20);
        text-align: center;
        line-height: px2rem(32);
    }


    .teacher {
        padding: px2rem(20);

        .item {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: px2rem(20);
            height: px2rem(120);

            img.teacher-photo {
                width: px2rem(100);
                height: px2rem(120);
                margin-right: px2rem(10);
            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                height: 100%;
                width: 100%;

                .name {
                    font-weight: 600;
                    font-size: px2rem(18);
                    line-height: px2rem(24);
                    margin-bottom: px2rem(5);
                }

                .title {
                    text-align: justify;
                }
            }


        }


    }

    .content {
        background: linear-gradient(180deg, #274FD8 0%, rgba(0, 0, 0, 0.82) 100%);
        border-radius: px2rem(10) px2rem(10) px2rem(0) px2rem(0);
        width: 100%;
        padding: px2rem(10);

        .title {
            text-align: center;
            font-size: px2rem(18);
            line-height: px2rem(24);
            margin-bottom: px2rem(30);

        }

        .line {
            line-height: px2rem(24);
            margin-bottom: px2rem(10);


            .time {
                font-size:  px2rem(16);
                line-height: px2rem(24);
                margin-right: px2rem(10);
            }

            .arrange {
                font-size:  px2rem(16);
                line-height: px2rem(24);
                margin-right: px2rem(10);
            }
        }
    }

    .case {
        img {
            width: 90%;
            text-align: left;
        }

        .title {
            margin-top: px2rem(10);
            margin-bottom: px2rem(10);
            font-size: px2rem(16);
        }
    }

    .contact {
        text-align: center;
        font-weight: 500;
        font-size: px2rem(18);
        line-height: px2rem(24);
        margin-top: px2rem(20);

        img {
            width: 50%;
            height: 50%;
        }
    }
}
</style>